<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 部门管理 </el-breadcrumb-item>
                <el-breadcrumb-item>部门添加</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                    <el-form-item label="部门名称" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="打卡时间">
                        <el-col :span="11">
                            <el-time-picker
                                placeholder="上班时间"
                                v-model="form.startTime"
                                :value-format="timeformat"
                                style="width: 100%"
                                :clearable="false"
                            ></el-time-picker>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                        <el-col :span="11">
                            <el-time-picker
                                placeholder="下班时间"
                                v-model="form.endTime"
                                :value-format="timeformat"
                                style="width: 100%"
                                :clearable="false"
                            ></el-time-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-switch v-model="form.status" :active-value="'01'" :inactive-value="'00'"></el-switch>
                    </el-form-item>
                    <el-form-item label="选择职位">
                        <el-checkbox-group v-model="form.position">
                            <el-checkbox :label="item.id" name="position" v-for="(item, index) in positions" :key="index">{{
                                item.name
                            }}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="部门描述">
                        <el-input type="textarea" rows="5" v-model="form.description"></el-input>
                    </el-form-item>
                    <el-form-item>
                         <el-button @click="goback" icon="el-icon-arrow-left">返回</el-button>
                        <el-button type="primary" @click="onSubmit('form')" icon="el-icon-plus">添加部门</el-button>
                        <el-button type="warning" @click="reset('form')" icon="el-icon-refresh-right">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'baseform',
    inject: ['reload'],
    data() {
        return {
            positions: [],
            timeformat:"HH:mm:ss",
            form: {
                name: '',
                startTime: '09:00:00',
                endTime: '18:00:00',
                status: '01',
                position: [],
                description: ''
            },
            condition: {
                did: '00',
                status: '01'
            },
            rules: {
                name: [
                    { required: true, message: '请部门名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ]
            }
        };
    },
    created: function () {
        this.init();
    },
    methods: {
        async init() {
            var d = await this.$http.post('/positionMap/', this.condition);
            if ((d.code = 200)) {
                this.positions = d.data;
                this.$message.success(d.message);
            } else {
                this.$message.error(d.message);
            }
        },

        onSubmit(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    var d = await this.$http.post('/dept', this.form);
                    if (d.code == 200) {
                        this.$message.success(d.message);
                        this.reload();
                    } else {
                        this.$message.error(d.message);
                    }
                } else {
                    this.$message.warning('请把内容填写完整!');
                }
            });
        },
         goback(){
            this.$router.go(-1);
        },

        reset(formName) {
            this.$confirm('此操作将重置所有信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                   this.form={
                        name: '',
                        startTime: '09:00:00',
                        endTime: '18:00:00',
                        status: '01',
                        position: [],
                        description: ''
                   }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消重置'
                    });
                });
        }
    }
};
</script>